<script setup>
import { ref, onMounted } from 'vue'
import { getAllTagAPI } from '../../../apis/apis'
import { RouterLink } from 'vue-router';

const tags = ref([])
const getAllTag = async () => {
  const res = await getAllTagAPI()
  tags.value = res.data
}
// todo 完成点击标签跳转到标签关联 的文章 时间线
onMounted(() => {
  getAllTag()
})
</script>

<template>

  <div class="px-8">
    <div class="flex flex-col items-center">
      <div class="text-3xl text-gray-600 font-semibold tracking-wide py-5">
        标签集锦
      </div>
      <div class="text-2xl text-gray-400 font-semibold tracking-wide pt-3 pb-10">
        目前共计 {{ tags.length }} 个标签
      </div>
    </div>
    <div class="flex items-center flex-wrap">
      <RouterLink
        v-for="tag in tags"
        :to="{ path: '/tag/' + tag.id, query :{name: tag.name}} "
        class="min-w-min mx-4 my-3 hover:-translate-y-1 cursor-pointer"
      >

        <el-card shadow="always">
          {{ tag.name }}
        </el-card>
      </RouterLink>

    </div>

  </div>

</template>

<style
  scoped
  lang='scss'
></style>